<template>
	<view class="page_content">
		<u-navbar title="浏览记录" :bgColor="them_color" :titleStyle="{color:'#ffffff'}" :autoBack="true"
			leftIconColor="#ffffff"></u-navbar>
		<view :style="'margin-top:' + navH + 'px;'">
			<view class="content-box">
				<view class="title">
					<text v-if="!edit_isShow" @click="editItems()">编辑</text>
					<text v-if="edit_isShow" @click="editItems()">完成</text>
				</view>
				<view class="content">
					<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
						<view class="item-box" v-for="(value,i) in list" :key="i">
							<view class="time">
								{{value.date}}
							</view>
							<view class="item">
									<view class="goods-box"  @click.stop="goodsDetailTo(value2.goods_id)" v-for="(value2,j) in value.goods_info" :key="j">
										<view class="goods">
											<image :src="value2.goods_thumb" mode=""></image>
											<view class="img-icon"  v-if="value2.isShow&&edit_isShow" @click.stop="index=i,selectItems(j)">
												<image class="img" :src="img_url+'/statics/yilangmp/goods_select.png'" mode=""></image>
											</view>
											<view class="img-icon img-icon2"  v-if="!value2.isShow&&edit_isShow"  @click.stop="index=i,selectItems(j)"></view>
										</view>	
										<view class="price">
											￥{{value2.shop_price}}
										</view>
									</view>
							</view>	
						</view>
						
					</mescroll-body>
				</view>
			</view>
		</view>
	    <view class="bottom-box" v-if="edit_isShow" >
	    	<text  class="txt" @click="delectItems()" >删除</text>
	    </view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapGetters
	} from "vuex";
	import {
		scan_log_list,
		scan_log_del
	} from '@/api/user.js'
	import {
		toLogin
	} from '@/libs/login.js';
import { BASE_URL } from "../../../config/app";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				page: 1,
				edit_isShow: false,
				index: 0, //外循环下标
				navH:'',
				them_color: getApp().globalData.theme_color,
				img_url:BASE_URL
			}
		},
		computed: {
			...mapGetters(['isLogin', 'app_token'])
		},
		onLoad() {
			this.navH = getApp().globalData.navHeight / 2;
			if (!this.isLogin) {
				toLogin()
			}
		},
		methods: {
			upCallback(page) {
				var that = this;
				scan_log_list({
					app_token: that.app_token,
					supplier_id: getApp().globalData.supplier_id,
					page: page.num,
				}).then(async (res) => {
					this.mescroll.endSuccess(res.data.length);

					if (page.num == 1) this.list = [];
					
					for(let value of  res.data) {
						
						const obj = {
							date:value.date,
							goods_info:[],
						}
						
						for(let value2 of  value.goods_info) {
							const obj1 = {
								goods_id:value2.goods_id,
								goods_name:value2.goods_name,
								shop_price:value2.shop_price,
								goods_thumb:value2.goods_thumb,
								vip_price:value2.vip_price,
								isShow:false //用来标记编辑的时候有没有选中
								
							}
							obj.goods_info.push(obj1)
						}
					
						that.list.push(obj) ;
					}
					console.log(that.list)
					// this.list = this.list.concat(res.data);
					
				
				}).catch(() => {
					this.mescroll.endErr();
				})
			},
			goodsDetailTo:function(goods_id) {
				uni.navigateTo({
					url:'/pages/goods/detail/index?goods_id='+goods_id
				})
			},
			editItems(){
				if(this.edit_isShow == false) {
					this.edit_isShow = true ;
				}else if(this.edit_isShow == true) {
					this.edit_isShow = false ;
				}
			},
			selectItems: function(j) {
				console.log(j)
				if (this.list[this.index].goods_info[j].isShow == false) {
					this.list[this.index].goods_info[j].isShow = true;
				} else if (this.list[this.index].goods_info[j].isShow == true) {
					this.list[this.index].goods_info[j].isShow = false;
				}
			},

			// 删除浏览记录
			delectItems: function() {
				var that = this;
				// 格式 日期_商品id,商品id 如 2021-10-20_1124,1125
				var goods_id = ''; //存放那种要删除的商品id
				var count = 0; //块与块之间 其中有没有被选中
				var is_have = false; //判断有没有被选中的商品

				var is_complet = false; //用来判断有没有循环完了

				for (let value of this.list) {

					var goods_item = '';

					var have_isShow = false; // 用来判断某一块中有没有被选中的商品
					var count_2 = 0; //块内的商品选中数					
					for (let value2 of value.goods_info) {
						// 选中
						if (value2.isShow == true) {
							// 有商品被选中的时候
							have_isShow = true; //记录这一块被有选中了

							is_have = true; //判断有没有被选中的商品 都没有被选中的商品那就不不允许调用接口

							count_2++; //被选中才记录
							if (count_2 == 1) {
								// 第一个
								goods_item = value.date + '_' + value2.goods_id;

							} else if (count_2 > 1) {
								goods_item = goods_item + ',' + value2.goods_id;
							}

						}

					}

					// 有被选中的才能计数
					if (have_isShow == true) {
						count++; //块与块之间 其中有没有被选中

						if (count == 1) {

							goods_id = goods_item;

						} else if (count > 1) {

							goods_id = goods_id + ';' + goods_item;

						}
					}
				}

				is_complet = true;

				if (is_complet == true) {
					scan_log_del({
						app_token: that.app_token,
						log_id: goods_id
					}).then((res) => {
						if (res.status != -1) {
							var count3 = 0; //用来记录第几块
							for (let value of that.list) {
								var newArr = value.goods_info.filter(function(key) {
									return key.isShow == false
								})
								value.goods_info = newArr;
							}
							var newArr2 = that.list.filter(function(key2) {
								return key2.goods_info.length > 0;
							})
							that.list = newArr2
						} else {
							uni.showToast({
								title: res.msg,
								duration: 1200
							})
						}
					})
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.page_content {

		width: 100%;
		// background-color: #EEEEEE;
		background-color: #FFFFFF;

		.content-box {
			width: 100%;
			padding-bottom: 120rpx;

			.title {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				padding-right: 60rpx;
				font-size: 30rpx;
				text-align: right;
				background-color: #EEEEEE;

			}

			.content {
				width: 100%;
				padding: 30rpx;


				.item-box {
					width: 100%;
					.time {
						width: 100%;
						text-align: left;
						font-size: 28rpx;
					}

					.item {
						width: 100%;
						display: flex;
						margin-top: 10rpx;
						flex-wrap: wrap;

						.goods-box {

							width: 33.3%;
							text-align: center;

							.goods {
								width: 95%;
								margin: auto;
								// background-color: red;
								position: relative;

								image {
									width: 170rpx;
									height: 170rpx;
									border-radius: 15rpx;
								}

								.img-icon {
									position: absolute;
									top: -20rpx;
									right: 10rpx;
									width: 45rpx;
									height: 45rpx;
									border-radius: 50%;

									.img {
										width: 45rpx;
										height: 45rpx;
										border-radius: 50%;
									}

								}

								.img-icon2 {
									border: 1rpx solid #000000;
									// border: 1rpx solid red;
									background-color: #FFFFFF;
									width: 35rpx;
									height: 35rpx;
									top: -10rpx;
									right: 20rpx;

								}

							}

							.price {
								width: 100%;
								font-size: 26rpx;
								color: #FE2525;
								line-height: 80rpx;
							}

						}


					}




				}

				.msg {
					width: 100%;
					line-height: 100rpx;
					height: 200rpx;
					background-color: #FFFFFF;
					font-size: 28rpx;
					text-align: center;
				}

			}


		}

		.bottom-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			padding-right: 30rpx;
			text-align: right;
			box-sizing: border-box;
			-weblit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			border-top: 1rpx solid #EEEEEE;
			background-color: #FFFFFF;

			.txt {
				font-size: 28rpx;
				padding: 10rpx 25rpx;
				background-color: #FE2525;
				color: #FFFFFF;
				border-radius: 40rpx;
			}
		}

	}
</style>
